<!DOCTYPE html>
<html lang="en" style="overflow-x:hidden;border:none">
<head>
<meta charset="utf-8">
<title>SimpleOne - A Responsive Html5 Ecommerce Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/style1.css" rel="stylesheet">
<link href="css/flexslider.css" type="text/css" media="screen" rel="stylesheet"  />
<link href="css/jquery.fancybox.css" rel="stylesheet">
<link href="css/cloud-zoom.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<!-- fav -->
<link rel="shortcut icon" href="assets/ico/favicon.html">
</head>
<body>

<div id="maincontainer">
  <section id="product">
    <div class="container">
     <!--  breadcrumb -->
      <ul class="breadcrumb">
        <li>
          <a href="#">首页</a>
          <span class="divider">/</span>
        </li>
        <li class="active">购物车</li>
      </ul>
      <h1 class="heading1"><span class="maintext">购物车</span><span class="subtext">所有你已经选择的商品</span></h1>
      <!-- Cart-->
      <div class="cart-info">
        <table class="table table-striped table-bordered">
          <tr>
            <th class="image">Image</th>
            <th class="name">Product Name</th>
            <th class="model">Model</th>
            <th class="quantity">Qty</th>
              <th class="total">Action</th>
            <th class="price">Unit Price</th>
            <th class="total">Total</th>
          </tr>
          <tbody id="gtb">
            <tr>
              <td class="image"><a href="#"><img title="product" alt="product" src="img/prodcut-40x40.jpg" height="50" width="50"></a></td>
              <td  class="name"><a href="#">Jeans</a></td>
              <td class="model">Purchased Product</td>
              <td class="quantity"><input type="text" size="1" value="1" name="quantity[40]" class="span1">

              </td>
              <td class="total"> <a href="#"><img class="tooltip-test" data-original-title="Update" src="images/update.png" alt=""></a>
                <a href="#"><img class="tooltip-test" data-original-title="Remove"  src="images/remove.png" alt=""></a></td>


                <td class="price">$120.68</td>
                <td class="total">$120.68</td>

              </tr>

          </tbody>
          <!-- <script type="text/javascript">
           $.get('./data/cha5.json',function(responseText,responseState,responseObj){
               var arr = responseText.data;
               console.log(arr);
               var str = "";
               for(var i in arr){
                  var imgURL = arr[i].picurl;
                  var title = arr[i].title;
                  var status = arr[i].status;
                  var cprice = arr[i].cprice;
                  str += `  <tr>
                                      <td class="image"><a href="#"><img title="茶叶图片" alt="product" src=`+imgURL+` height="70" width="70"></a></td>
                                      <td  class="name"><a href="#">`+title+`</a></td>
                                      <td class="model" style="color:blue">`+status+`</td>
                                      <td class="quantity">
                                          <span class="jian"><img src="images/jian.png" height="26"></span>
                                          <input type="text" size="1" value="1" style="width:27px;height:27px;margin:0 5px;text-align:center;color:black" class="jg">
                                          <span class="jia"><img src="images/jia.png" height="26"></span>

                                      </td>
                                      <td class="total"> <a href="#"><img class="tooltip-test" data-original-title="Update" src="images/update.png" alt=""></a>
                                        <a href="#"><img class="tooltip-test" data-original-title="Remove"  src="images/remove.png" alt=""></a></td>


                                        <td class="price" style="color:black">￥`+cprice+`</td>
                                        <td class="total1" style="color:red">￥`+cprice+`</td>

                      </tr>`
               }
               $("#gtb").html(str);
              //  $("#jia").click(function(){
              //     var val = parseInt($("#jg").val());
              //     $("#jg").val(val+1);
              //  })
              console.log($(".jia"));
              $(".jia").click(function(){
                //  console.log($(this).prev());
              var val = parseInt($(this).prev().val());
              $(this).prev().val(val+1);
              var pic = $(this).parents("td").next().next().html();
              var pic1 = parseFloat(pic.substring(1,pic.length))
              $(this).parents("td").next().next().next().html("￥"+((val+1)*pic1).toFixed(2));
              })
              $(".jian").click(function(){
                //  console.log($(this).prev());
                var val = parseInt($(this).next().val());
                if(val >= 1){
                  $(this).next().val(val-1);
                  var pic = $(this).parents("td").next().next().html();
                  var pic1 = parseFloat(pic.substring(1,pic.length))
                  $(this).parents("td").next().next().next().html("￥"+((val-1)*pic1).toFixed(2));
                }else {
                  $(this).next().val(0);
                  // $(this).parents("td").next().next().next().html(0);
                }
              })
          })
          </script> -->
        </table>
      </div>
      <div class="cartoptionbox">
        <h4 class="heading4">选择您是否具有要使用的折扣代码或奖励积分，或者想要估算交货成本。</h4>
        <input type="radio" class="radio">
      使用优惠券代码 <br>
        <input type="radio" class="radio">
      使用礼券 <br>
        <input type="radio" class="radio" checked="checked">
      估计运费税<br><br>
        <form class="form-vertical form-inline">
          <h4 class="heading4">选择所在城市和街道</h4>
          <fieldset>
            <div class="control-group">
              <label  class="control-label">地址：</label>
              <div class="controls">
                <select  class="span3 cartcountry" style="height:34px;width:100px">
                  <option>城市</option>
                  <option>太原</option>
                  <option>大同</option>
                </select>
                <select class="span3 cartstate" style="height:34px;;width:100px">
                  <option>街道或区</option>
                  <option>尖草坪区</option>
                  <option>万柏林区</option>
                </select>
                <!-- <input type="submit" value="确定" class="btn btn-orange" id="clk"> -->
                <button type="button" name="button" id="clk"> 确认</button>
              </div>
            </div>
          </fieldset>
        </form>
      </div>
      <div class="container">
      <div class="pull-right">
          <div class="span4 pull-right">
            <table class="table table-striped table-bordered ">
              <tr>
                <td><span class="extra bold">订单实际价格</span></td>
                <td><span class="bold" id="sjjg">￥0.00</span></td>
              </tr>
              <tr>
                <td><span class="extra bold">邮费</span></td>
                <td><span class="bold" id="zk">￥0.00</span></td>
              </tr>
              <tr>
                <td><span class="extra bold">路途安全保险</span></td>
                <td><span class="bold">￥0.50</span></td>
              </tr>
              <tr>
                <td><span class="extra bold totalamout">订单总计 :</span></td>
                <td><span class="bold totalamout" id="ddzj">￥0.00</span></td>
              </tr>
            </table>
            <input type="submit" value="退出购物车" class="btn btn-orange pull-right">
            <input type="submit" value="确认订单" class="btn btn-orange pull-right mr10">
          </div>
        </div>
        </div>
    </div>
      <script type="text/javascript">
       $.get('./data/cha5.json',function(responseText,responseState,responseObj){
           var arr = responseText.data;
           console.log(arr);
           var str = "";
           for(var i in arr){
              var imgURL = arr[i].picurl;
              var title = arr[i].title;
              var status = arr[i].status;
              var cprice = arr[i].cprice;
              str += `  <tr>
                                  <td class="image"><a href="#"><img title="茶叶图片" alt="product" src=`+imgURL+` height="70" width="70"></a></td>
                                  <td  class="name"><a href="#">`+title+`</a></td>
                                  <td class="model" style="color:blue">`+status+`</td>
                                  <td class="quantity">
                                      <span class="jian"><img src="images/jian.png" height="26"></span>
                                      <input type="text" size="1" value="1" style="width:27px;height:27px;margin:0 5px;text-align:center;color:black" class="jg">
                                      <span class="jia"><img src="images/jia.png" height="26"></span>

                                  </td>
                                  <td class="total"> <a href="#"><img class="tooltip-test" data-original-title="Update" src="images/update.png" alt=""></a>
                                    <a href="#"><img class="tooltip-test shanC" data-original-title="Remove"  src="images/remove.png" alt=""></a></td>


                                    <td class="price" style="color:black">￥`+cprice+`</td>
                                    <td class="total1" style="color:red">￥`+cprice+`</td>

                  </tr>`
           }
           $("#gtb").html(str);
          //  $("#jia").click(function(){
          //     var val = parseInt($("#jg").val());
          //     $("#jg").val(val+1);
          //  })
          console.log($(".jia"));
          $(".jia").click(function(){
            //  console.log($(this).prev());
          var val = parseInt($(this).prev().val());
          $(this).prev().val(val+1);
          var pic = $(this).parents("td").next().next().html();
          var pic1 = parseFloat(pic.substring(1,pic.length))
          $(this).parents("td").next().next().next().html("￥"+((val+1)*pic1));
          })
          $(".jian").click(function(){
            //  console.log($(this).prev());
            var val = parseInt($(this).next().val());
            if(val >= 1){
              $(this).next().val(val-1);
              var pic = $(this).parents("td").next().next().html();
              var pic1 = parseFloat(pic.substring(1,pic.length))
              $(this).parents("td").next().next().next().html("￥"+((val-1)*pic1).toFixed(2));
            }else {
              $(this).next().val(0);
              // $(this).parents("td").next().next().next().html(0);
            }
          })
          function zjg(){
            var total = $("#gtb .total1");
            var totalNum = $("#gtb .total1").length;
            console.log(total);
            console.log(totalNum);
            var sum = 0;
            for(var i = 0;i<totalNum;i++){
              console.log(total[i].innerHTML);
              var pic = parseFloat(total[i].innerHTML.substring(1,total[i].innerHTML.length));
              sum += pic;
            }
            return sum.toFixed(2);
          }
          var count = 5;
          var zkOne = 0.5;
          $("#clk").click(function(){
              // console.log(zjg());
              $("#sjjg").html("￥"+zjg())
              if($("#gtb .total1").length>=7){
                count =0;
              }else {
                count = 5;
              }
              console.log(count);
              $("#zk").html("￥"+parseFloat(count*$("#gtb .total1").length).toFixed(2))
              var ssum = parseFloat((parseFloat(zjg()))+(count*$("#gtb .total1").length)+($("#gtb .total1").length*zkOne));
              console.log($("#gtb .total1").length*zkOne);
              console.log(count*$("#gtb .total1").length);
              console.log(zjg());

              $("#ddzj").html("￥"+ssum.toFixed(2));
          })
          $("#gtb .shanC").click(function(){
            console.log($(this).parents("tr"));
            $(this).parents("tr").remove();
          })
      })
      </script>
  </section>
</div>

<script src="js/bootstrap.js"></script>
<script src="js/respond.min.js"></script>
<script src="js/application.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script defer src="js/jquery.fancybox.js"></script>
<script defer src="js/jquery.flexslider.js"></script>
<script type="text/javascript" src="js/jquery.tweet.js"></script>
<script  src="js/cloud-zoom.1.0.2.js"></script>
<script  type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript"  src="js/jquery.carouFredSel-6.1.0-packed.js"></script>
<script type="text/javascript"  src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript"  src="js/jquery.touchSwipe.min.js"></script>
<script type="text/javascript"  src="js/jquery.ba-throttle-debounce.min.js"></script>
<script defer src="js/custom.js"></script>
</body>
</html>
